<template>
  <div class="container-wrapper" :class="[customClass]">
    <slot></slot>
    <div class="container-action" v-if="designer.selectedId === thisWidget.id && !thisWidget.internal">
      <i :title="$t('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(thisWidget)">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <el-icon-back style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
      <i v-if="!!thisParentList && (thisParentList.length > 1)" :title="$t('designer.hint.moveUpWidget')"
         @click.stop="moveUpWidget()">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <el-icon-top style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
      <i v-if="!!thisParentList && (thisParentList.length > 1)" :title="$t('designer.hint.moveDownWidget')"
         @click.stop="moveDownWidget()">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <el-icon-bottom style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
      <i v-if="thisWidget.type === 'table'" :title="$t('designer.hint.insertRow')"
         @click.stop="appendTableRow(thisWidget)">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <sc-icon-insert-row style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
      <i v-if="thisWidget.type === 'table'" :title="$t('designer.hint.insertColumn')"
         @click.stop="appendTableCol(thisWidget)">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <sc-icon-insert-column style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
      <i v-if="(thisWidget.type === 'grid') || (thisWidget.type === 'table')" :title="$t('designer.hint.cloneWidget')"
         @click.stop="cloneContainer(thisWidget)">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <el-icon-copy-document style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
      <i :title="$t('designer.hint.remove')" @click.stop="removeWidget">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <el-icon-delete style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
    </div>

    <div class="drag-handler" v-if="designer.selectedId === thisWidget.id && !thisWidget.internal">
      <i :title="$t('designer.hint.dragHandler')">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <sc-icon-drag-move style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
      <i>{{ $t(`designer.widgetLabel.${thisWidget.type}`) }}</i>
      <i v-if="thisWidget.options.hidden === true">
		  <el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
			  <el-icon-hide style="height: 1.1em;width: 1.1em"/>
		  </el-icon>
      </i>
    </div>
  </div>
</template>

<script>
import containerMixin from "@/components/designer/form-designer/form-widget/container-widget/containerMixin";

export default {
  name: "container-wrapper",
  mixins: [containerMixin],
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    customClass() {
      return this.thisWidget.options.customClass ? this.thisWidget.options.customClass.join(' ') : ''
    },
  },
  data() {
    return {
      thisWidget:this.widget,
      thisParentWidget:this.parentWidget,
      thisParentList:this.parentList,
      thisIndexOfParentList:this.indexOfParentList
    }
  },
  watch: {
    'widget': {
      handler(val) {
        if (val) {
          this.thisWidget = val
        }
      }
    },
    'parentWidget': {
      handler(val) {
        if (val) {
          this.thisParentWidget = val
        }
      }
    },
    'parentList': {
      handler(val) {
        if (val) {
          this.thisParentList = val
        }
      }
    },
    'indexOfParentList': {
      handler(val) {
        if (val) {
          this.thisIndexOfParentList = val
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../../../../../assets/formdesigner/styles/global.scss";

.container-wrapper {
  position: relative;
  margin-bottom: 5px;

  .container-action {
    position: absolute;
    //bottom: -30px;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: $--color-primary;
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .drag-handler {
    position: absolute;
    top: -2px;
    //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: $--color-primary;
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: move;
    }
  }

}

</style>
